<template>
  <view class="">
    <view class="bgtop bgred">
      <view class="flex flex-row justify-start items-center">
        <image class="autho" :src="userInfo.avatar" mode="aspectFill"></image>
        <view class="flex flex-col" @tap="goRecord">
          <view class="f_34 c_f flex flex-row justify-start items-center"
            >共 {{ doneObj.integral || '' }} 积分
            <image
              src="@/static/mine/arrowwhite.svg"
              mode="widthFix"
              style="width: 30rpx"
            ></image>
          </view>
          <text class="f_24 c_f mt_10">连续签到7天可获神秘大礼包</text>
        </view>
        <image
          src="@/static/mine/shu.png"
          class="top_img"
          mode="widthFix"
        ></image>
      </view>
      <view class="signlist">
        <view class="flex flex-col">
          <view style="text-align: left;font-size: 26rpx;color:#ec3b26"
            >连续签到会额外获得抽奖次数哦～</view
          >
          <view class="flex flex-row mt_20 flex-wrap">
            <view v-for="(item, index) in sign" :key="index" style="width: 25%">
              <view
                v-if="index > 0 && index % 6 == 0"
                class="itemstwo flex flex-row items-center justify-center"
              >
                <view class="flex flex-col items-center justify-start">
                  <text class="c_0 f_26">
                    {{ item.title || '' }}
                  </text>
                  <text class="mt_10 f_24 c_9">神秘大礼包</text>
                </view>
                <image
                  src="@/static/mine/liwu.png"
                  mode="widthFix"
                  style="width: 150rpx"
                ></image>
              </view>
              <view
                v-else
                class="items flex flex-col justify-center items-center"
                :class="item.status ? 'active' : ''"
              >
                <text class="f_26 c_0">{{ item.title || '' }}</text>
                <image
                  class="icon_jb mtb20"
                  src="@/static/mine/jifen.svg"
                  mode="widthFix"
                ></image>
                <text class="f_24 c_9">{{ item.point || '' }}积分</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <view class="rwlist">
      <!-- 邀请有礼 -->
      <img class="rwlist-img" src="https://csqxtest.nangua.website/crmebimage/public/maintain/2023/12/07/889613b3d67642e290eb16144b50c1daeg9vdu3zzl.png" alt="" />
      <button class="rwlist-btn" open-type="share"></button>
      <!-- <view class="flex flex-col">
        <view class="title f_32 c_0 flex justify-center items-center"
          >做任务赚积分</view
        >
      </view>
      <view class="tab flex flex-row items-center justify-between">
        <view
          class="tab-item"
          :class="tabActive == index ? 'active' : ''"
          v-for="(item, index) in tablist"
          :key="index"
          @click="tabClick(index)"
        >
          {{ item }}
        </view>
      </view> -->
      <!-- <view class="list" v-if="tabActive == 0">
        <view class="flex flex-col justify-between items-center">
          <view
            class="flex flex-row justify-start items-center item"
            v-for="(item, index) of relistall"
            :key="index"
          >
            <view class="kuang">
              <image
                src="https://tcjyh2022.oss-cn-hangzhou.aliyuncs.com/wechat/csqx_zhong.png"
                mode="widthFix"
                style="width: 67rpx"
              ></image>
            </view>

            <view class="info_title flex flex-col justify-center items-start">
              <text class="f_28 c_52">
                {{ item.name }}
              </text>
              <view class="jindu">
                <view
                  class="jd"
                  :style="{ width: js(item).width + '%' }"
                ></view>
              </view>
              <text class="c_9 f_22 mt_10">
                {{ item.description }}可领取奖励
              </text>
            </view>
            <view class="btn" v-if="item.finishStatus == 0">
              <view class="btnk" @click="golook(item, item.id, 1)"
                >去查看</view
              >
            </view>
            <view class="btn" v-else-if="item.finishStatus == 2">
              <view class="btnk">已完成</view>
            </view>
          </view>
        </view>
      </view>
      <view class="list" v-if="tabActive == 1">
        <view class="flex flex-col justify-between items-center">
          <view
            class="flex flex-row justify-start items-center item"
            v-for="(item, index) of relist"
            :key="index"
          >
            <view class="kuang">
              <image
                src="https://tcjyh2022.oss-cn-hangzhou.aliyuncs.com/wechat/csqx_zhong.png"
                mode="widthFix"
                style="width: 67rpx"
              ></image>
            </view>

            <view class="info_title flex flex-col justify-center items-start">
              <text class="f_28 c_52">
                {{ item.missionName }}
              </text>
              <view class="jindu">
                <view
                  class="jd"
                  :style="{ width: js1(item).width + '%' }"
                ></view>
              </view>
              <text class="c_9 f_22 mt_10">
                {{ item.updateTime }}
              </text>
            </view>
            <view class="btn" v-if="item.status == 0">
              <view class="btnk" @click="golook1(item, item.missionId, 2)"
                >去查看</view
              >
            </view>

            <view class="btn" v-else-if="item.status == 1">
              <view class="btnk" @click="lingqu1(item)">去领取</view>
            </view>

            <view class="btn" v-else-if="item.status == 2">
              <view class="btnk">已完成</view>
            </view>
          </view>
        </view>
      </view> -->
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import dayjs from "dayjs";
import {
  getSignConfig,
  getIntegralSign,
  postSignUser,
  getMissionList,
  getUserMissionList,
  getUserViewList,
  getMissionDetailNew,
  getUserMissionReceiveAward,
} from "@/api/api";
export default {
  computed: mapGetters(["isLogin", "userInfo", "uid", "subAppId"]),
  data() {
    return {
      show: true,
      sign: [],
      doneObj: {},
      tablist: ["全部任务", "进行中"],
      tabActive: 0,
      relist: [],
      relistall: [],
      relist1: [],
      viewlist: [],
    };
  },
  onShareAppMessage(res) {
    return {
      title: '好友邀请你一起抽奖啦！',
      path: '/pages/index/index?spreadId=' + this.uid,
      imageUrl: "https://tcjyh2022.oss-cn-hangzhou.aliyuncs.com/wechat/csqx_zhong.png"
    }
  },
  onShow() {
    this.init();
    // this.getall();
    // this.geting();
  },
  methods: {
    lingqu(e) {
      getUserMissionReceiveAward({ userMissionId: e.awards[0].missionId }).then(
        (res) => {
          uni.showToast({
            title: "领取成功",
          });
        }
      );
    },
    js(e) {
      let num = 0;
      let width = 0;
      let view = 0;
      this.viewlist.map((item) => {
        if (item.missionId == e.id) {
          num = num + 1;
        }
      });
      width = (num / e.awards[0].view) * 100;

      let data = {
        width: width,
        num: num,
      };
      return data;
    },
    js1(e) {
      let num = 0;
      let width = 0;
      let view = 0;
      this.viewlist.map((item) => {
        if (item.missionId == e.missionId) {
          num = num + 1;
        }
      });
      this.relist1.map((item) => {
        if (item.id == e.missionId) {
          view = item.awards[0].view;
        }
      });
      width = (num / view) * 100;
      let data = {
        width: width,
        num: num,
        view: view,
      };
      return data;
    },
    golook(e, id, type) {
      if (type == 1) {
        this.$store.commit("setMissionMId", id);
      }
      if (type == 2) {
        this.$store.commit("setMissionPId", id);
      }
      if (e.name.includes("秒杀")) {
        uni.switchTab({
          url: "/pages/miaosha/miaosha",
        });
      } else {
        uni.switchTab({
          url: "/pages/pintuan/pintuan",
        });
      }
    },
    //获取全部任务
    getall() {
      getMissionList().then((res) => {
        this.relistall = res.data.list;
      });
    },
    async geting() {
      let data = await getUserMissionList({
        // startTime: dayjs().format("YYYY-MM-DD") + " 00:00:00",
        // endTime: dayjs().format("YYYY-MM-DD") + " 23:59:59",
        page: 1,
        limit: 10,
        uid: this.uid,
        subAppId: this.subAppId,
      });
      let arr = data.data.list;
      if (arr.length > 0) {
        this.tabActive = 1;
      }
      // 冗余详情数量、冗余浏览次数
      for (let j = 0; j < arr.length; j++) {
        let ele = arr[j];
        let info = await getMissionDetailNew(ele.missionId);
        ele.view_time = info.data.awards[0].view; // 当前任务需要浏览次数
        let all = await getUserViewList({
          missionId: ele.missionId,
          uid: this.uid,
          subAppId: this.subAppId,
          // enterTime: dayjs().format("YYYY-MM-DD") + " 00:00:00",
          // leaveTime: dayjs().format("YYYY-MM-DD") + " 23:59:59",
        });
        let arr_arr = all.data;
        let new_arr = [];
        let obj = {};
        for (let i = 0; i < arr_arr.length; i++) {
          let item = arr_arr[i];
          if (!obj[item.productId]) {
            obj[item.productId] = "true";
            new_arr.push(item);
          }
        }
        ele.all_time = new_arr.length; // 当前任务浏览次数
      }
      this.relist = arr;
    },

    goRecord() {
      uni.navigateTo({
        url: "/pages/point_record/point_record",
      });
    },
    tabClick(index) {
      this.tabActive = index;
      if (index == 0) {
        this.getall();
      } else {
        this.geting();
      }
    },
    async init() {
      if (!this.userInfo.isDaySign) {
        await getIntegralSign();
        uni.showToast({
          title: '签到成功！签到奖励已发放',
          icon: 'none'
        })
      }
      this.configFn();
    },
    async configFn() {
      let info = await getSignConfig();
      this.sign = info.data;
      let done = await postSignUser();
      this.doneObj = done.data;
    },
  },
};
</script>

<style lang="scss">
.jindu {
  width: 300rpx;
  height: 20rpx;
  border-radius: 50rpx;
  background-color: #fee9e6;
  position: relative;
  overflow: hidden;
  .jd {
    width: 0;
    position: absolute;
    height: 20rpx;
    left: 0;
    top: 0;
    background: #ec3b26;
  }
}
.popup {
  position: relative;
  padding-bottom: 20rpx;
  .close {
    position: absolute;
    bottom: -200rpx;
    left: 50%;
    margin-left: -25rpx;
  }

  .w100 {
    width: 100%;
  }

  .red-again {
    width: 90%;
    margin: 20rpx 0;
    padding: 20rpx 0;
    background-color: rgba(255, 221, 192, 0.5);
  }

  .btn {
    width: 80%;
    margin: 20rpx auto;
  }

  .btnk {
    border: 1rpx solid #ec3b26;
    color: #ec3b26;
    width: 200rpx;
    height: 60rpx;

    border-radius: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .btnkactive {
    border: 1rpx solid #ec3b26;
    color: #ec3b26;
    width: 200rpx;
    border-radius: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60rpx;
    background: #ec3b26;
    color: #fff;
  }

  .kuang {
    width: 100rpx;
    height: 100rpx;
    border-radius: 10rpx;
    border: 1rpx solid #f6f6f6;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10rpx;
  }

  .title {
    width: 600rpx;
    text-align: center;
    justify-content: center;
    align-items: center;
    position: relative;

    image {
      margin: 0 auto;
      margin-top: -180rpx;
      width: 550rpx;
    }
  }

  .jf {
    width: 60rpx;
  }

  .title_name {
    color: #fff;
    font-weight: bolder;
    position: absolute;
    top: -65rpx;
    left: 50%;
    margin-left: -90rpx;
    font-size: 48rpx;
    letter-spacing: 4rpx;
  }
}

.rwlist {
  margin-top: 400rpx;
  width: 730rpx;
  margin-left: auto;
  margin-right: auto;
  background: #fff;
  padding: 30rpx;
  border-radius: 20rpx;
  background: #fff;
  position: relative;
  &-img {
    width: 100%;
    height: 300rpx;
    border-radius: 20rpx;
  }
  &-btn {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
  }

  .item {
    width: 100%;
    margin: 20rpx 0;
    padding: 20rpx 0;
    position: relative;
    border-bottom: 1rpx solid #f6f6f6;
  }

  .btnk {
    border: 1rpx solid #ec3b26;
    color: #ec3b26;
    width: 120rpx;
    height: 60rpx;
    position: absolute;
    right: 0;
    top: 40rpx;
    border-radius: 10rpx;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .btnkactive {
    background: #ec3b26;
    color: #fff;
  }

  .kuang {
    width: 100rpx;
    height: 100rpx;
    border-radius: 10rpx;
    border: 1rpx solid #f6f6f6;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 10rpx;
  }
}

.signlist {
  width: 100%;
  padding: 30rpx 20rpx;
  border-radius: 20rpx;
  background: #fff;
  z-index: 9;
  display: inline-flex;
  margin-top: 30rpx;

  .itemstwo {
    width: 327rpx;
    height: 206rpx;
    background-color: #f5f6faff;
    margin-bottom: 20rpx;
    margin-top: 10rpx;
    border-radius: 20rpx;

    image {
      margin-left: 20rpx;
    }
  }

  .items {
    width: 155rpx;
    height: 206rpx;
    margin-bottom: 20rpx;
    margin-top: 10rpx;
    background-color: #f5f6faff;
    border-radius: 20rpx;

    .icon_jb {
      width: 80rpx;
      margin: 10rpx 0;
    }
  }

  .active {
    background: linear-gradient(90deg, #ff783e 1.9%, #ed2b00 98.1%);
    text {
      color: #fff !important;
    }
  }

  .items:nth-child(4) {
    margin-right: 0;
  }
}

.bgtop {
  width: 100%;
  height: 420rpx;

  padding: 50rpx 20rpx;
  position: relative;
  z-index: 1;

  .top_img {
    position: absolute;
    right: 10rpx;
    width: 280rpx;
    top: 40rpx;
  }

  .autho {
    width: 120rpx;
    height: 120rpx;
    border-radius: 50%;
    margin-right: 20rpx;
  }
}
.tab .active {
  color: #ec3b26;
}

</style>
